<template>
  <div class="footer">
    <div class="footer-service-main">
      <div class="footer-service-area">
        <div class="footer-service">
          <a href="http://www.baidu.com" target="_blank"></a>
          <a href="http://www.sina.com.cn" target="_blank"></a>
          <a href="http://www.sohu.com" target="_blank"></a>
          <a href="http://www.tmall.com" target="_blank"></a>
        </div>
        <div class="footer-service-menu">
          <ul>
            <li>购物指南</li>
            <li><a href="#">免费注册</a></li>
            <li><a href="#">开通支付宝</a></li>
            <li><a href="#">支付宝充值</a></li>
          </ul>
          <ul>
            <li>天猫保障</li>
            <li><a href="#">发票保障</a></li>
            <li><a href="#">售后规则</a></li>
            <li><a href="#">缺货赔付</a></li>
          </ul>
          <ul>
            <li>支付方式</li>
            <li><a href="#">快捷支付</a></li>
            <li><a href="#">信用卡</a></li>
            <li><a href="#">蚂蚁花呗</a></li>
            <li><a href="#">货到付款</a></li>
          </ul>
          <ul>
            <li>商家服务</li>
            <li><a href="#">天猫规则</a></li>
            <li><a href="#">商家入驻</a></li>
            <li><a href="#">商家中心</a></li>
            <li><a href="#">天猫智库</a></li>
            <li><a href="#">物流服务</a></li>
            <li><a href="#">喵言喵语</a></li>
            <li><a href="#">运营服务</a></li>
          </ul>
          <ul>
            <li>手机天猫</li>
            <li><img src="images/iphone_qrcode.png" alt="手机天猫" /></li>
          </ul>
        </div>
        <div class="footer-logo"></div>
      </div>
    </div>
    <div class="footer-copy-main">
      <div class="footer-copy-area">
        <div class="footer-nav">
          <a href="#">关于天猫</a>
          <a href="#">帮助中心</a>
          <a href="#">开放平台</a>
          <a href="#">诚聘英才</a>
          <a href="#">联系我们</a>
          <a href="#">网站合作</a>
          <a href="#">法律声明</a>
          <a href="#">隐私权政策</a>
          <a href="#">知识产权</a>
          <a href="#">廉正举报</a>
          <a href="#">规则意见征集</a>
        </div>
        <div class="friend-link">
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
          <span>|</span>
          <a href="#">阿里巴巴集团</a>
        </div>
        <ul class="footer-cert">
          <li>增值电信业务经营许可证： <a href="#">浙B2-20110446</a></li>
          <li>网络文化经营许可证：<a href="#">浙网文[2015]0295-065号</a></li>
          <li><a href="#">12318举报</a></li>
          <li>
            互联网违法和不良信息举报电话：0571-81683755 blxxjb@alibaba-inc.com
          </li>
          <li>
            互联网药品信息服务资质证书编号：<a href="#"
              >浙-（经营性）-2017-0005</a
            >
          </li>
          <li>
            <img
              src="./images/cert_icon.png"
              alt="浙公网"
              style="vertical-align: middle"
            />&nbsp;<a href="#">浙公网安备 33010002000120号</a>
          </li>
        </ul>
        <div class="copy">© 2003-2018 TMALL.COM 版权所有</div>
        <div class="cert-logo">
          <a href="#" class="cert-logo-list"
            ><img src="./images/cert_logo1.jpg" alt=""
          /></a>
          <a href="#" class="cert-logo-list"
            ><img src="./images/cert_logo2.jpg" alt=""
          /></a>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "SFooter",
};
</script>

<script lang="ts" setup></script>

<style lang="less" scoped>
.footer {
  width: 100%;
  height: auto;
  clear: both;
  margin-top: 10px;
}
.footer .footer-service-main {
  width: 100%;
  height: 360px;
  background: #ffffff;
  border-top: 1px solid #d1d7dc;
  padding-bottom: 20px;
}
.footer .footer-service-area {
  width: 1230px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.footer .footer-service {
  width: 100%;
  height: 150px;
  background-image: url("./images/service.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
}
.footer .footer-service a {
  width: 25%;
  height: 100%;
  display: block;
  float: left;
}
.footer .footer-service-menu {
  width: 100%;
  height: 210px;
  clear: both;
  overflow: hidden;
}
.footer .footer-service-menu ul {
  width: 15%;
  height: auto;
  float: left;
  margin-top: 30px;
  margin-left: 5%;
}
.footer .footer-service-menu ul li:nth-child(1) {
  font-size: 16px;
  color: #646464;
  font-weight: bold;
  margin-bottom: 5px;
}
.footer .footer-service-menu ul li {
  margin-bottom: 2px;
}
.footer .footer-service-menu ul li a {
  font-size: 12px;
  color: #8b8b8b;
  text-decoration: none;
}
.footer .footer-logo {
  width: 70px;
  height: 25px;
  position: absolute;
  z-index: 1;
  left: 5%;
  bottom: -20px;
  background: url("../images/tmall_icon.png");
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
}
.footer .footer-copy-main {
  width: 100%;
  height: 200px;
  clear: both;
  background: #000000;
  border-top: 2px solid #ff0036;
}
.footer .footer-copy-area {
  width: 1230px;
  height: 100%;
  margin: 0 auto;
}
.footer .footer-nav {
  width: 100%;
  height: auto;
  margin-top: 8px;
}
.footer .footer-nav a,
.footer .friend-link a {
  color: #ffffff;
  font-size: 12px;
  text-decoration: none;
}
.footer .friend-link {
  width: 100%;
  height: auto;
  margin-top: 18px;
}
.footer .friend-link span {
  color: #ffffff;
  font-size: 12px;
}
.footer .footer-cert {
  width: 100%;
  height: auto;
  font-size: 12px;
  color: #a4a4a4;
  margin-top: 10px;
}
.footer .footer-cert li {
  float: left;
  width: auto;
  height: auto;
  height: 25px;
  overflow: hidden;
  margin-right: 7%;
}
.footer .footer-cert li:nth-child(4) {
  margin-right: 0px;
}
.footer .footer-cert a {
  color: #a4a4a4;
  text-decoration: none;
}
.footer .copy {
  width: 100%;
  height: auto;
  clear: both;
  color: #686868;
  font-size: 12px;
}
.footer .cert-logo {
  width: 100%;
  height: auto;
  overflow: hidden;
  margin-top: 10px;
}
.footer .cert-logo .cert-logo-list {
  width: 73px;
  height: 30px;
  float: left;
  display: block;
  margin-right: 10px;
  overflow: hidden;
}
.footer .cert-logo .cert-logo-list img {
  width: 100%;
  height: 100%;
  border: 0px none;
}
</style>
